import React, { useState, lazy, Suspense } from 'react';
import { Tabs, Spin } from 'antd';

// 使用懒加载替代直接导入
const UserManagement = lazy(() => import('./user'));
const RoleManagement = lazy(() => import('./role'));
const MenuManagement = lazy(() => import('./menu'));

const { TabPane } = Tabs;

const SystemManagement: React.FC = () => {
  const [activeKey, setActiveKey] = useState('user');

  const handleTabChange = (key: string) => {
    setActiveKey(key);
  };

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-4">系统管理</h1>
      
      <Tabs activeKey={activeKey} onChange={handleTabChange} type="card">
        <TabPane tab="用户管理" key="user">
          <Suspense fallback={<div className="flex justify-center p-12"><Spin tip="加载中..." /></div>}>
            <UserManagement />
          </Suspense>
        </TabPane>
        <TabPane tab="角色管理" key="role">
          <Suspense fallback={<div className="flex justify-center p-12"><Spin tip="加载中..." /></div>}>
            <RoleManagement />
          </Suspense>
        </TabPane>
        <TabPane tab="菜单管理" key="menu">
          <Suspense fallback={<div className="flex justify-center p-12"><Spin tip="加载中..." /></div>}>
            <MenuManagement />
          </Suspense>
        </TabPane>
      </Tabs>
    </div>
  );
};

export default SystemManagement; 
